<!--
 * @Author: gaotang
 * @Date: 2024年12月27日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2024-12-27 15:35:39
-->
<template>
  <div class="contents" @click.stop="otherclick">
    <div class="mapwrap">
      <ItemWrap v-if="showData" :style="{ left: offsetX, top: offsetY }" style="height: 605px; width: 420px"
        class="dialog" title="进口单价" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <MapData />
      </ItemWrap>
    </div>
    <div class="content_left" @click="changePage('left')"></div>
    <transition-group name="fade" mode="out-in" tag="div" class="content_center">
      <ItemAvator v-for="(item, idx) in list" :key="item.id" :class="[item.className]" :title="item.title"
        :style="{ height: item.height, width: item.width }" @click="changePage(idx)">
        <component :is="item.name" :type="item.type" @chartClick="chartClick"></component>
      </ItemAvator>
    </transition-group>
    <div class="content_right" @click="changePage('right')"></div>
  </div>
</template>

<script>
import { getScreenPoint } from '@/utils/';
import './index.js';
import { componentList } from './component-list.js';
import MapData from './modal/map-data.vue';

export default {
  name: 'AvatorMain',
  components: {
    MapData
  },
  data() {
    return {
      offsetX: 0,
      offsetY: 0,
      showData: false,
      isMapClick: false,
      list: [...componentList]
    };
  },
  mounted() {
    this.list = [...componentList]
  },
  methods: {
    chartClick(params) {
      console.log('点击的数据:', params.event);
      const { x, y } = getScreenPoint(params.event.event)
      this.isMapClick = true;
      // const { name, event } = params;
      // this.offsetX = event.offsetX + 860 + 'px';
      // this.offsetY = event.offsetY + 500 + 'px';
      this.offsetX = x;
      this.offsetY = y;
      this.showData = true;
    },
    otherclick() {
      if (!this.isMapClick) {
        this.showData = false;
        this.showData2 = false;
      }
      this.isMapClick = false;
    },
    changePage(type) {
      if (type === 'left') {
        const shift = this.list.shift();
        this.list.push(shift);
        this.updateProps();
      } else if (type === 'right') {
        const pop = this.list.pop();
        this.list.unshift(pop);
        this.updateProps();
      } else if (type != 2) {
        const curr = this.list.splice(type, 1);
        this.list.splice(2, 0, curr[0]);
        this.updateProps();
      }
    },
    updateProps() {
      [
        {
          width: '398px',
          className: 'l-item',
          type: 'LeftLeft',
          height:'801px'
        },
        {
          width: '880px',
          className: 'content_lr-item',
          type: 'LeftRight',
        },
        {
          width: '1300px',
          className: 'content_lr-item',
          type: 'Center',
        },
        {
          width: '880px',
          className: 'content_lr-item',
          type: 'RightLeft',
        },
        {
          width: '420px',
          className: 'r-item',
          type: 'RightRight',
        },
      ].forEach(
        (item, idx) => (this.list[idx] = { ...this.list[idx], ...item })
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.contents {
  .mapwrap {
    // margin-top: -20px;
    // margin-bottom: -50px;
    // height: 580px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    // position: relative;
    top: 0;
    z-index: 900;
    pointer-events: none;

    .close {
      position: absolute;
      right: 15px;
      top: 10px;
      cursor: pointer;
    }

    .dialog {
      width: 400px;
      height: 200px;
      position: absolute;
      z-index: 999;
    }
  }

  .content_left,
  .content_right {
    width: 300px;
    display: flex;
    cursor: pointer;
    background-position: center center;
    background-size: 65px 65px;
    animation: scaleAnimation 1.5s ease-in-out infinite;

    &:hover {
      animation-play-state: paused;
    }
  }

  .content_left {
    background: url('../../assets/img/launch/avator/left.png') no-repeat center;
  }

  .content_right {
    background: url('../../assets/img/launch/avator/right.png') no-repeat center;
  }

  // 中间
  .content_center {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .l-item {
    width: 398px;
    height: 801px;
    // transform: perspective(1000px) rotateY(30deg); // 设置3D旋转角度
    // transform-origin: right center; // 设置旋转中心为元素左边
    // transition: transform 0.5s ease-in-out; // 添加过渡效果
    background: url('../../assets/img/launch/avator/leftLeftBg.png') no-repeat center;
    background-size: 398px 801px;
  }

  .r-item {
    transform: perspective(1000px) rotateY(-30deg); // 设置3D旋转角度
    transform-origin: left center; // 设置旋转中心为元素左边
    transition: transform 0.5s ease-in-out; // 添加过渡效果
  }
}

// 定义缩放动画
@keyframes scaleAnimation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  // transform: translateX(-100%, 0); // 从右往左
  // transform: translateX(100%, 0); // 从右往左
  transform: translate(0, 100%); // 从右往左
}
</style>
